昨天介紹了 JS 中強制轉型,顯性轉型的部分,今天就要介紹最坑人的隱含轉型
這邊同樣將隱含轉型做個大方向的分類:
在上篇顯性轉型文章中,有刻意將 Strings <–> Numbers 拆成轉成字串、轉成數字,不過在隱含轉型中由於 +
號算數運算子狀況過於特別,所以這次還是一起講了。
+
算數運算子我們都知道,使用 +
運算子,相加兩個數字時,呈現結果會是兩個數字總和,若用 +
將兩組字串相加,則會讓字串內容連起來,但如果兩個運算元的型別不一致呢?
這種狀況 JS 會根據 運算元中是否有字串、數字類型時,將另為一個運算元自動轉型,關於這部分則有幾個規則:
[]
碰上 +
號,陣列中的值會一併轉成字串,並帶上陣列中的逗號,若是空陣列則轉成空字串。{}
放在運算元第一位,碰上 +
號,{}
會直接被當成空區塊而無作用,若 {}
放在運算元第二位或是後方時,會被轉成 "[object Object]"
的字串,且上述規則不論物件是否有值都會成立。接著就用程式碼來看看上面規則是否正確:
'test' + 1 //"test1"
'test'
是字串,數字 1 被轉成字串,字串相加。123 + [] // "123"
[]
會轉成空字串,因此數字 123 也轉成字串,結果就是字串 "123"['1','2','3'] + 456 //"1,2,3456"
,
會被保留。{} + '123' //123
{}
在前沒有作用,會變成 +
號會變成正負運算子,因為正負運算子字串 '123'
會被轉成數字。666 + {obj:'test'} //"666[object Object]"
{obj:'test'}
在後面 會被轉型成 "[object Object]"
的字串,因此數字 666 也轉成字串 "666" 做字串相加。true + 10 //11
true
轉成數字 1 ,與數字 10 相加。以上大致就是各種型別碰上 +
算數運算子隱含轉後的狀況。
除了 +
算數運算子,的狀況比較特別,其他算數運算子,都會將字串轉換成數字,範例如下
var test = '2'
test + 1 //"21"
test - 1 // 1
test * 1 //2
test / 1 //2
但如果字串不是數字內容的字串,使用 +
以外的算數運算子時都會回傳 NaN
,例如:
var test = 'test'
test - 1 // NaN
test * 1 // NaN
test / 1 // NaN